<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>最简单的例子</title>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="../lib/highmap/highcharts.js"></script>
    <script src="../lib/highmap/modules/map.js"></script>
    <script src="../lib/highmap/modules/data.js"></script>
    <!--地图数据-->
    <script type="text/javascript" src="../lib/highmap/cn-china-by-peng8.js"></script>
    <script>
    	$(function(){
    		//地图数据
    		var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']);
    		//配置结构
    		var options={
                tooltip: { 
                    formatter:function(){
                        return "你为什么这么犀利？<br />"+this.point.name;   
                    }
                },
                credits:{
                    href:"http://www.baidu.com",
                    text:"百度"
                },
                title:{
                    text : '中国地图'
                },
    			series : [{
		            data : data,
		            name: '中国'
		        }],
    		};
    		//渲染地图
    		$('#container').highcharts('Map',options);
    	})
    </script>
</head>
<body>
	<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
</body>
</html>